<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>请假单管理</title>
    <link rel="icon" href="/resources/favicon.ico">
    <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/resources/css/public.css" media="all" />
</head>
<body class="childrenBody">
<!-- 搜索条件开始 -->
<form class="layui-form" method="post" id="searchForm"style="margin:0 300px">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">请假单标题:</label>
            <div class="layui-input-inline">
                <input type="text" name="title"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">请假单内容:</label>
            <div class="layui-input-inline">
                <input type="text" name="content"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">开始时间:</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="begintime" name="begintime" placeholder=" - ">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">结束时间:</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="endtime"  name="endtime" placeholder=" - ">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="margin-left:240px">
        <div class="layui-inline">
            <button type="button" lay-submit="" lay-filter="doSearch" class="layui-btn layui-btn-normal layui-btn-radius layui-icon layui-icon-search" id="doSearch">查询</button>
            <button type="reset" class="layui-btn layui-btn-warm layui-btn-radius layui-icon layui-icon-refresh">重置</button>
        </div>
    </div>
</form>
<!-- 搜索条件结束 -->


<!-- 数据表格开始 -->
<div style="margin-left:30px">
    <table class="layui-hide" id="leavebillTable" lay-filter="leavebillTable" lay-data="{id: 'leavebillTable'}"></table>
</div>
<!--表格工具条-->
<div style="display: none;" id="tableToolBar">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>
    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete">
        <i class="layui-icon">&#xe640;</i> 批量删除
    </button>
</div>
<!-- 行级工具条
/*0新建(未提交) -编辑 删除 提交*/
/*1审批中- 审批查询*/
/*2审批完成-审批查询*/
/*3已放弃-编辑 删除 审批查询*/
-->
<script type="text/javascript" id="rowToolBar">
    {{# if(d.state == 0){ }}
        <a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a>
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="submitRequest" >提交申请</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    {{# }else if(d.state== 3){ }}
        <a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a>
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="auditQuery" >审批查询</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    {{# }else{ }}
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="auditQuery" >审批查询</a>
    {{# } }}
</script>
<!-- 数据表格结束 -->

<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px 20px 0 20px" id="saveOrUpdateDiv" >
    <form class="layui-form"  lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">请假单标题:</label>
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <input type="text" name="title"  placeholder="请输入请假单标题" autocomplete="off"
                       class="layui-input" style="width: 510px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请假天数:</label>
            <div class="layui-input-inline">
                <input type="text" name="days" placeholder="请输入请假天数" lay-verify="required|number"autocomplete="off"
                       class="layui-input">
            </div>
            <label class="layui-form-label" style="margin-left: 10px">开始时间:</label>
            <div class="layui-input-inline">
                <input type="text" id="leavetime" name="leavetime" placeholder="请输入开始时间" lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请假原因:</label>
            <textarea id="content" name="content" style="width: 510px" class="layui-textarea" lay-verify="required"></textarea>
        </div>
        <div class="layui-form-item" style="margin:10px 130px">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-submit lay-filter="doSubmit">提交</button>
                <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" id="dataFrmResetBtn">重置</button>
            </div>
        </div>
    </form>
</div>
<!-- 添加和修改的弹出层结束 -->
<!-- 查看请假单审批的弹出层开始 -->
<div id="auditQueryDiv" style="display: none;padding: 20px">
    <form class="layui-form"  lay-filter="auditFrm" id="auditFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">请假单标题:</label>
            <div class="layui-input-block">
                <input type="text" name="title"autocomplete="off"
                       class="layui-input" style="width: 510px" disabled="disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请假天数:</label>
            <div class="layui-input-inline">
                <input type="text" name="days" disabled="disabled" lay-verify="required|number"autocomplete="off"
                       class="layui-input">
            </div>
            <label class="layui-form-label" style="margin-left: 10px">开始时间:</label>
            <div class="layui-input-inline">
                <input type="text" disabled="disabled" name="leavetime" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请假原因:</label>
            <textarea name="content" style="width: 510px" class="layui-textarea" disabled="disabled"></textarea>
        </div>
    </form>
    <div style="margin-left:30px">
        <table class="layui-hide" id="auditTable" lay-filter="auditTable" lay-data="{id: 'auditTable'}"></table>
    </div>
</div>
<!-- 查看请假单审批的弹出层结束 -->
<script src="/resources/layui/layui.js"></script>
<script type="text/javascript">
    var tableIns;
    layui.use([ 'jquery', 'layer', 'form','table','laydate'], function() {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laydate = layui.laydate;

        //渲染编辑器
        var index;
        //渲染数据表格
        tableIns = table.render({
            elem : '#leavebillTable', //渲染的目标对象
            url : '/sys/leavebill/loadLeavelbill', //数据接口
            title : '请假单数据表',//数据导出来的标题
            toolbar : "#tableToolBar", //表格的工具条
            defaultToolbar : [ 'filter','exports','print' ],
            width:'1250',
            height : 'full-195',
            cellMinWidth : 100, //设置列的最小默认宽度
            done : function(res, curr, count) {
                if(res.data.length==0&&curr!=1){
                    tableIns.reload({
                        page:{
                            curr:curr-1
                        }
                    })
                }
            },

            totalRow : false, //开启合并行
            page : true, //是否启用分页
            text : {
                none : '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            },
            cols : [ [ //列表数据
                {type : 'checkbox',fixed : 'left'},
                {field:'id',title:'ID',align:'center',width:'50'},
                {field :'title',title:'标题',align : 'center',width:'152'},
                {field :'content',title:'内容',align : 'center',width:'351'},
                {field : 'leavetime',title : '开始时间',align : 'center',width:'200'},
                {field : 'days',title : '请假天数',align : 'center',width:'95'},
                {field : 'state',title : '状态',align:'center',width:'100',templet : function(d) {
                        return d.state == '0' ? '<font color=red>新建</font>' :
                            d.state == '1' ? '<font color=green>审批中</font>' :
                            d.state == '2' ? '<font color="blue">审批完成</font>' :
                                '<font color="grey">已放弃</font>';
                    }},
                {fixed : 'right',title : '操作',toolbar:'#rowToolBar',width :'245',align:'center'}
            ] ]
        });
        laydate.render({
            elem: '#begintime'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#leavetime'
            ,type: 'datetime'
            ,min:0
        });
        laydate.render({
            elem: '#endime'
            ,type: 'datetime'
            ,max:1
        });

        //模糊查询
        form.on("submit(doSearch)", function (data) {
            tableIns.reload({
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        });

        //监听头部工具栏事件
        table.on("toolbar(leavebillTable)",function(obj){
            switch(obj.event){
                case 'add':
                    openAddLeavelbill();
                    break;
                case 'batchDelete':
                    batchDeleteLeavelbill();
                    break;
            };
        })

        //监听行工具事件
        table.on('tool(leavebillTable)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'del'){ //删除
                deleteSingleLeavelbill(data);
            } else if(layEvent === 'edit'){ //编辑
                openUpdateLeavelbill(data);
            }else if(layEvent ==='auditQuery'){//审批查询
                openAuditQuery(data);
            }else if(layEvent === 'submitRequest'){//提交申请
                submitRequest(data);
            }
        });


        var url;
        var mainIndex;
        //打开添加页面
        function openAddLeavelbill(){
            mainIndex = layer.open({
                type:1,
                title:'添加请假单',
                content:$("#saveOrUpdateDiv"),
                area:['700px','340px'],
                success:function(index){
                    //清空修改页面使用过的表单数据
                    $("#dataFrm")[0].reset();
                    //为弹框中表单提交传递提交地址
                    url="/sys/leavebill/addLeavelbill"
                }
            });
        }

        //打开修改页面
        function openUpdateLeavelbill(data){
            mainIndex=layer.open({
                type:1,
                title:'修改请假单',
                content:$("#saveOrUpdateDiv"),
                area:['700px','340px'],
                success:function(index){

                    form.val("dataFrm",data);
                    url="/sys/leavebill/updateLeavelbill";
                }
            });
        }
        /*打开审批信息弹窗*/
        function openAuditQuery(data){
            layer.open({
                type:1,
                title:'审批信息查询',
                content:$("#auditQueryDiv"),
                area:['700px','500px'],
                success:function(index){
                    form.val("auditFrm",data);
                    //渲染下方审批信息table
                    tableIns = table.render({
                        elem : '#auditTable', //渲染的目标对象
                        url :"/sys/leavebill/getHistoryCommentByLeavebillId?id="+data.id,
                        cols : [ [ //列表数据
                            {field:'time',title:'批注时间',align:'center',width:'198'},
                            {field :'userName',title:'批注人',align : 'center',width:'198'},
                            {field : 'message',title : '批注内容',align : 'center',width:'229'},
                        ] ]
                    });
                }
            });
        }

        //表单提交数据
        form.on("submit(doSubmit)",function(result){
            //序列化表单数据
            var formData=$("#dataFrm").serialize();
            $.post(url,formData,function(result){
                //弹出操作情况数据msg-->封装数据处理请求返回的信息
                var code = result.code;
                var msg = result.msg;
                if(code>0){
                    layer.close(mainIndex);
                    layer.alert(result.msg, {
                        icon: 1
                    });
                    tableIns.reload();
                }else{
                    layer.alert(result.msg, {
                        icon: 0
                    });
                }
            })


        })

        //删除单个请假单
        function deleteSingleLeavelbill(data){
            var url = "/sys/leavebill/deleteSingleLeavelbill";
            layer.confirm('确认删除['+data.title+']请假单吗？', function(index){

                $.post(url,data,function(result){
                    if(result.code>0){
                        layer.alert(result.msg,{
                            icon:1
                        });
                        tableIns.reload();
                    }else{
                        layer.alert(result.msg,{
                            icon:0
                        });
                    }
                });
            });
        }

        //批量删除请假单-->传Leavelbillids过去-->联想复选框传一个name对应多个值
        function batchDeleteLeavelbill(){
            var checkStatus = table.checkStatus('leavebillTable');
            var data = checkStatus.data;
            var params = "";
            $.each(data,function(i,e){
                if(i==0){
                    params+="ids="+e.id;
                }else{
                    params+="&ids="+e.id;
                }
            });
            layer.confirm("真的要删除选中的这些请假单吗?",function(){
                $.post("/sys/leavebill/deleteBatchLeavelbill",params,function(result){
                    if(result.code>0){
                        layer.alert(result.msg,{
                            icon:1
                        });
                    }else{
                        layer.alert(result.msg,{
                            icon:0
                        });
                    }
                    //刷新数据表格
                    tableIns.reload();
                });
            });
        }
        /*请假单提交*/
        function submitRequest(data){
            var id = data.id;
            var url = "/sys/leavebill/submitLeavebill?id="+id
            $.get(url,function(result){
                if(result.code>0){
                    layer.alert(result.msg,{
                        icon:1
                    });
                    //刷新数据表格
                    tableIns.reload();
                }else{
                    layer.alert(result.msg,{
                        icon:0
                    });
                }
            })
        }

    });

</script>

</body>
</html>